<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>请柬</title>
<link id="theme" rel="stylesheet" href="/public/card/swiper-3.4.2.min.css" />
<style type="text/css">
html,body {padding: 0;margin: 0;height: 100%;}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    width: 100%;
    height: 100%;
}
.invite_text {
    width: 280px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -140px;
    top: 8%;
    z-index: 2;
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #413831;
}
.invite_text p {width: 280px;word-break:break-all;}
.wedbg {
    background-image: url(/public/card/wed.png);

}

.drop-up {
    display: block;
    -webkit-animation: drop-up 2s ease infinite;
    -o-animation: drop-up 2s ease infinite;
    animation: drop-up 2s ease infinite;
}
.drop-up {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    z-index: 6;
}
@-webkit-keyframes drop-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 8px, 0);
        transform: translate3d(0, 8px, 0);
    }

    50% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }
}
.img {width: 100%;height: 100%;}
@font-face{
    font-family:iconfont;
    src:url(//at.alicdn.com/t/font_1472549913_2097237.eot);
    src:url(//at.alicdn.com/t/font_1472549913_2097237.eot?#iefix) format('embedded-opentype'),
    url(//at.alicdn.com/t/font_1472549913_2097237.woff) format('woff'),
    url(//at.alicdn.com/t/font_1472549913_2097237.ttf) format('truetype'),
    url(//at.alicdn.com/t/font_1472549913_2097237.svg#iconfont) format('svg')
}
.iconfont{font-family:iconfont;font-style:normal}

.mapimg {width: 86%;position: absolute;left: 7%;text-align: center;top:56%;}
.mapimg img {width: 100%;}
.map_navigator {
    position: absolute;
    top: 0;
    right: 15px;
    width: 85px;
    height: 26px;
    padding-left: 4px;
    line-height: 22px;
    background: rgba(0,0,0,.5);
    color: #fff;
    text-align: left;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
}
</style>
</head>
<body>
<div id="closebtn" style="width: 100%;height: 40px;background-color: rgba(0,0,0,0);display: none;position: fixed;left: 0;top: 0;z-index: 9999;">
    <a id="closebtn" href="/mobile/close">
        <img src="/public/v1/img/guanbilogo.png" style="width: 30px;float: right;margin: 5px 5px 0 0 ;"/>
    </a>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <?php
        if(!empty($card['bridegroom'])) {
        ?>
        <div class="swiper-slide wedbg">
            <div class="invite_text">
                <p>{$card['bridegroom']}先生 &amp; {$card['bride']}女士</p>
                <p>谨定于</p>
                <p>{$card['fmt_date']}</p>
                <p>于 {$card['address']}</p>
                <p>举行结婚典礼</p>
                <p>{$card['content']}</p>
            </div>
            <div class="drop-up"><i class="iconfont"></i></div>
        </div>
        <?php }else{ ?>
        <div class="swiper-slide">
            <div class="invite_text">
                <p>亲爱的同仁</p>
                <p>公司计划于</p>
                <p>{$card['fmt_date']}</p>
                <p>于 {$card['address']}</p>
                <p>举行年会</p>
                <p>{$card['content']}</p>
            </div>
            <div class="drop-up"><i class="iconfont"></i></div>
        </div>
        <?php } ?>
        <?php
        for($i = 1; $i < 6; $i++){
            $key = 'pic'.$i;
            if(!empty($card[$key])) {
        ?>
        <div class="swiper-slide">
            <img src="{$card[$key]}" class="img" />
            <div class="drop-up"><i class="iconfont"></i></div>
        </div>
        <?php }} ?>
        <div class="swiper-slide">
            <div class="invite_text">
                <p>{$card['address']}</p>
                <p>{$card['fmt_date']}</p>
            </div>
            <div class="mapimg">
                <img src="http://apis.map.qq.com/ws/staticmap/v2/?center={$card['lat']},{$card['lng']}&zoom=15&size=600*300&maptype=roadmap&markers=size:large|color:0xFFCCFF|label:1|{$card['lat']},{$card['lng']}&key=6RSBZ-XTAH4-USGU3-DMDXO-WFZ7F-ENFER"/>
                <div class="map_navigator" onclick="mapNavigator()"><i class="iconfont"></i>&nbsp;&nbsp;酒店导航</div>
            </div>
            <div class="drop-up"><i class="iconfont"></i></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/public/card/zepto.min.js"></script>
<script type="text/javascript" src="/public/card/swiper-3.4.2.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,

// 如果需要分页器
//pagination: '.swiper-pagination',

// 如果需要前进后退按钮
//nextButton: '.swiper-button-next',
//prevButton: '.swiper-button-prev',

// 如果需要滚动条
//scrollbar: '.swiper-scrollbar',
})

function mapNavigator() {
    window.open('http://apis.map.qq.com/uri/v1/marker?marker=coord:{$card['lat']},{$card['lng']};title:{if empty($card['bridegroom'])}年会地点{else}婚礼地点{/if};addr:{$card['address']}&referer=myapp');
}

function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

if(!isWeiXin()){
    $('#closebtn').show();
}
</script>
</body>
</html>